<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试网页</title>
	<style >
		*{padding: 0;margin:0;}
		.banner{
			height: 320px;
			position: relative;
		}
		.img-list{
			position: relative;
		}
		.img-item{
			height: 320px;
			position: absolute;
			left: 0;
			right: 0;
			top:0;
			bottom:0;
			background-position: center top; 
			z-index: 5
		}
		.img-idx-box{
			position: absolute;
			bottom: 40px;
			left: 0;
			right: 0;
			text-align: center;
			z-index: 10;
		}
		.img-idx{
			display: inline-block;
			width: 50px;
			height: 10px;
			background: #fff;
			opacity: 0.7;
			filter:alpha(opacity=70);
		}
		.img-idx.active{
			opacity: 1;
			background: red;
			filter:alpha(opacity=100);
		}
	</style>
</head>
<body>
	<div id="banner" class="banner">
		<div class="img-list">
			<div class="img-item" style="background-image:url('load.gif')" data-src='banner-1.png' data-info='no'></div>
			<div class="img-item" style="background-image:url('load.gif')" data-src='banner-gh.jpg' data-info='no'></div>
			<div class="img-item" style="background-image:url('load.gif')" data-src='banner-2.jpg' data-info='no'></div>
			
		</div>
		<div class="img-idx-box">
			<a href="javascript:;" class="img-idx"></a>
			<a href="javascript:;" class="img-idx"></a>
			<a href="javascript:;" class="img-idx"></a>
			
		</div>
	</div>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		(function ($) {
			$.fn.banner=function(a){
				var agm={
					img:".img-item",
					idxObj:".img-idx",
					Onidx:"active",
					time:1000
				}

				var o=$.extend(agm,a);
				var _this=$(this);
				var imgObj=_this.find(o.img);
				var idxObj=_this.find(o.idxObj);
				var idx=0;

				function checkidx(x){
					if (x<idxObj.size()-1) {
						x++
					}else if (x=idxObj.size()-1) {
						x=0;
					};
					return x
				}
				function play(x){
					if (imgObj.eq(x).attr("data-info")=="no") {
						imgObj.eq(x).attr('data-info','yes');
						var src=imgObj.eq(x).attr("data-src");
						imgObj.eq(x).attr("style","background-image:url("+src+")");
					};
					imgObj.fadeOut(400);
					imgObj.eq(x).fadeIn(400);
					idxObj.removeClass(o.Onidx);
					idxObj.eq(x).addClass(o.Onidx);
				}
				idxObj.click(function(){
					idx=$(this).index();
					play(idx);
				});

				timer=setInterval(function(){
					idx=checkidx(idx);
					play(idx);
				},o.time);

			};
		})(jQuery)

		$("#banner").banner();
	</script>
</body>
</html>